<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="The Aloha Editor Boilerplate - Just another demo page">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<title>The Aloha Editor Boilerplate - Just another demo page</title>
	
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="../../css/aloha.css" id="aloha-style-include" type="text/css">
	
	<script src="js/aloha-config.js"></script>
	<!--  extra/attributes,extra/googletranslate,extra/metaview,extra/wai-lang,extra/headerids,extra/cite  -->
	<script src="../../lib/aloha.js"
	        data-aloha-plugins="common/format,
	                            common/table,
	                            common/list,
	                            common/link,
	                            common/highlighteditables,
	                            common/block,
	                            common/undo,
	                            common/contenthandler,
	                            common/paste,
	                            common/characterpicker,
	                            common/commands,
	                            extra/flag-icons,
	                            common/abbr,
	                            extra/wai-lang,
	                            extra/browser,
	                            extra/linkbrowser"></script>
	<script src="js/aloha-boilerplate.js"></script>
</head>
<body>
	<div id="whole-site">
		<div id="aloha-loading"><span>Loading Aloha Editor</span> <img src="img/loading1.gif" title="loading program..."/></div>
		<div id="container">
			<div id="header">
				<a id="editor-logo" href="#"><img src="img/aloha-editor-logo.png" alt="Aloha Editor" /></a>
				<p id="top-text">The Aloha Boilerplate.</p>
			</div>
			<div id="navigation">
				<ul>
					<li><a href="#">formatting</a></li>
					<li><a href="#">images</a></li>
					<li><a href="#">tables</a></li>
					<li><a href="#">boxes</a></li>
					<li><a href="#">comments</a></li>
				</ul>
			</div>
			<div id="main" role="main">
			<!-- Stage area start -->
				<div class="stage-area">
					<ul class="stage-switcher">
						<li class="stage">
							<span class="stage-icon" style="background-image: url(img/stage-icon-formats.png);"></span>
							<h2>Formatting</h2>
							<p>Bold, headlines, ...</p>
							<div class="small-image stage-item">
								<img src="img/stage-bg-formats.png" alt="" />
								<div class="area-content">
									<div class="aloha-textbox">
									<p><b>Bold or headlines, whatever you might want</b></p>
									<h2>Formatting content</h2>
									<p>Editing any content with Aloha Editor is similar to editing with state of the art word processors on your desktop. No need to learn any HTML, Wiki or other markup language. The option dialogs have been designed for users not for techies. Writing content has never been that easy.</p>
									<p><a href="#">More about content formatting</a></p>
									</div>
								</div>
							</div>
						</li>
						<li class="stage">
							<span class="stage-icon" style="background-image: url(img/stage-icon-images.png);"></span>
							<h2>Images</h2>
							<p>Placing, scaling ...</p>
							<div class="full-image stage-item">
								<img src="img/stage-bg-images.png" alt="" />
								<div class="area-content">
									<h3>Place and edit images with Aloha</h3>
									<h2>Image-Editing</h2>
									<p>Editing any content with Aloha Editor is similar to editing with state of the art word processors on your desktop. No need to learn any HTML, Wiki or other markup language. The option dialogs have been designed for users not for techies. Writing content has never been that easy.</p>
									<p><a href="#">Digg into placing/editing of images</a></p>
								</div>
							</div>
						</li>
						<li class="stage">
							<span class="stage-icon" style="background-image: url(img/stage-icon-tables.png);"></span>
							<h2>Tables</h2>
							<p>All you might put into tables</p>
							<div class="full-image stage-item">
								<img src="img/stage-bg-tables.png" alt="" />
								<div class="area-content">
									<h3>Create and edit tables the way you want them to be</h3>
									<h2>Table Stuff</h2>
									<p>Editing any content with Aloha Editor is similar to editing with state of the art word processors on your desktop. No need to learn any HTML, Wiki or other markup language. The option dialogs have been designed for users not for techies. Writing content has never been that easy.</p>
									<p><a href="#">Try out table editing</a></p>
								</div>
							</div>
						</li>
						<li class="stage">
							<span class="stage-icon" style="background-image: url(img/stage-icon-boxes.png);"></span>
							<h2>Boxes</h2>
							<p>You may edit dynamic boxes</p>
							<div class="full-image stage-item">
								<img src="img/stage-bg-boxes.png" alt="" />
								<div class="area-content">
									<h3>You can edit dynamic content</h3>
									<h2>Edit jQuery stuff</h2>
									<p>Your imagination ist the limit. Edit every content even if it is dynamic.</p>
									<p><a href="#">Try out jQuery boxes</a></p>
								</div>
							</div>
						</li>
						<li class="stage">
							<span class="stage-icon" style="background-image: url(img/stage-icon-comments.png);"></span>
							<h2>Comments</h2>
							<p>threaded inline comments</p>
							<div class="full-image stage-item">
								<img src="img/stage-bg-comments.png" alt="" />
								<div class="area-content">
									<h3>Threaded inline enterprise commenting</h3>
									<h2>Increase collaboration</h2>
									<p>Your imagination ist the limit. Does more content fill the box and move it to the right?</p>
									<p><a href="#">Try out jQuery boxes</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- Stage area end -->
				<div id="content">
					<p>Here you'll find some <b>example content</b> to show Aloha's <i>possibilities</i> regarding any kind of formatting.</p>
					<h1>Headline 1</h1>
					<h2>Headline 2</h2>
					<h3>Headline 3</h3>
					<h4>Headline 4</h4>
					<h5>Headline 5</h5>
					<h6>Headline 6</h6>
					<p>Here we test, a <a title="" href="http://aloha-editor.org">link</a> and other formattings such as 
					<b>bold</b>, <i>italic</i> or <del>deleted text</del>. You may also use formattings for maths 2
					<sup>2</sup> = 4 or chemical formulas like CO<sub>2</sub>.
					Or you may edit tables as you do in office products.</p>
					<table summary="demo content for aloha tables">
						<tbody>
							<tr><td >This</td><td >is</td><td>a</td><td>demo</td></tr>
							<tr><td>table</td><td colspan=2 rowspan=2>with</td><td>an</td></tr>
							<tr><td>awesome</td><td>column</td></tr>
							<tr><td>and</td><td>row</td><td>span</td><td>!</td></tr>
						</tbody>
						<caption>describe the table</caption>
					</table>
					<p>To describe code you would use fixed style <i>pre</i></p>
					<pre>
&lt;script&gt;
	// make content editable
	$('#content').aloha();
	$('.top-text').aloha();
&lt;/script&gt;
					</pre>
					<ul>
						<li>List entry
							<ul>
								<li>List entry</li>
								<li>List entry
									<ul>
										<li>List entry</li>
										<li>List entry</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>List entry</li>
						<li>List entry</li>
						<li>List entry</li>
					</ul>
					<p><br/></p>
					<ol>
						<li>List entry
							<ol>
								<li>List entry</li>
								<li>List entry
									<ol>
										<li>List entry</li>
										<li>List entry</li>
									</ol>
								</li>
							</ol>
						</li>
						<li>List entry</li>
						<li>List entry</li>
						<li>List entry</li>
					</ol>
					<p>For better sematical understanding and <abbr title="Web Accessibility Initiative">WAI</abbr> compatibility you can describe abbreviations
					like <abbr title="Hyper Text Markup Language">HTML</abbr> and 
					<abbr title="Cascading Style Sheets">CSS</abbr>.
					</p>
				</div>
				<div id="references"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			Aloha.ready( function(){
				var $ = Aloha.jQuery;
				// register all editable areas
				$('#top-text').aloha();
				$('#content').aloha();
				$('.area-content').aloha();
				// hide loading div
				$('#aloha-loading').hide();
				$('#aloha-loading span').html('Loading Plugins');
			});
		</script>
	</div>
	<!--[if lt IE 7 ]>
	<script src="js/libs/dd_belatedpng.js"></script>
	<script> DD_belatedPNG.fix('img, .png_bg');</script>
	<![endif]-->
</body>
</html>
